<template>
	<div class="person">
		<!-- 树形结构 -->
		<div class="person-tree">
			<span>组织树</span>
			<el-tree
				:data="treeInfo"
				default-expand-all
				ref="orgTree"
				node-key="id"
				:props="defaultProps"
				@node-click="treeNodeClick"
			></el-tree>
		</div>
		<!-- 内容展示 -->
		<div class="person-show">
			<!-- 工具栏 -->
			<Toolbar>
				<template #left>
					<div class="left-item">
						<span>设备名称:</span>
						<el-input placeholder="请输入" size="small"></el-input>
					</div>
					<div class="left-item">
						<span>设备编码:</span>
						<el-input placeholder="请输入" size="small"></el-input>
					</div>
					<div class="left-item">
						<span>设备状态:</span>
						<el-select v-model="searchInfo.status" placeholder="请选择" size="small">
							<el-option
								v-for="item in select_status"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</div>
				</template>
				<template #right>
					<div class="right-item">
						<el-button size="small" type="info" plain>重制</el-button>
						<el-button size="small" type="info">查询</el-button>
					</div>
				</template>
			</Toolbar>

			<div class="person-show__card">
				<!-- 表格展示 -->
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column type="index" align="center"></el-table-column>
						<el-table-column align="center" prop="prop" label="设备名称"></el-table-column>
						<el-table-column align="center" prop="prop" label="所在分组"></el-table-column>
						<el-table-column align="center" prop="prop" label="设备编码"></el-table-column>
						<el-table-column align="center" prop="prop" label="设备类型"></el-table-column>
						<el-table-column align="center" prop="prop" label="设备状态"></el-table-column>
						<el-table-column align="center" prop="prop" label="系统类型"></el-table-column>
						<el-table-column align="center" prop="prop" label="位置"></el-table-column>
						<el-table-column align="center" label="操作" width="160">
							<template #default="{ row }">
								<el-button type="text" size="mini" @click="lookover(row)">查看视频</el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 翻页 -->
					<div class="mt15">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="searchInfo.pageNum"
							:page-size="searchInfo.pageSize"
							:page-sizes="[10, 20, 50]"
							:total="totalPage"
							background
							layout="sizes, prev, pager, next, jumper"
						></el-pagination>
					</div>
				</div>
			</div>
		</div>

		<!-- 新增人员弹窗 -->
		<el-dialog :visible.sync="showdialog_video" width="800px">
			<div class="formWrapper"></div>
		</el-dialog>
	</div>
</template>
 
<script>
import { turnPage } from '@/mixins/turnPage';

export default {
	mixins: [turnPage],
	name: 'Person',
	data() {
		return {
			showdialog_video: false,
			treeInfo: [] /* 树 */,
			formData: {} /* 表格 */,
			select_status: [] /* 状态下拉 */,
			rules: {} /* 校验规则 */,
			defaultProps: {} /* 树形节点名 */,
			tableData: [{}] /* 表格数据 */,
			totalPage: 1 /* 表格总数 */,
			searchInfo: {
				pageNum: 1,
				pageSize: 10
			} /* 检索信息 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		// 查询表格数据
		queryTable() {},

		// 树形结构的点击
		treeNodeClick() {},

		// 查看视频
		lookover() {
			this.showdialog_video = true;
		}
	}
};
</script>
 
<style lang="scss">
.person {
	padding: 20px;
	font-size: 14px;
	display: flex;
	height: calc(100vh - 40px);

	.person-tree {
		min-width: 300px;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #eee;
		box-shadow: $--xy-shadow-deep;

		& > span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 15px 0;
			background-color: rgb(0, 166, 217);
			color: #fff;
		}
	}

	.person-show {
		flex: 1;
		margin-left: 20px;
		border-radius: 3px;
		overflow: hidden;

		&__card {
			margin-top: 10px;
			padding: 0 15px;
		}
	}

	.toolbar-wrapper {
		height: 50px;
		box-sizing: border-box;
	}

	.left-item {
		padding-left: 15px;
		display: flex;
		align-items: center;

		& > span {
			display: inline-block;
			min-width: 65px;
			font-size: 13px;
			color: #666;
			margin-right: 5px;
		}

		.el-select {
			margin-right: 20px;
		}
	}

	.right-item {
		padding-right: 15px;
	}

	.el-tree {
		padding: 10px;
	}

	.el-form-item {
		width: 46%;

		input {
			width: 280px;
		}
	}

	.formWrapper {
		width: 100%;
		height: 400px;
		@include xy-dfc;
	}

	.el-tree-node.is-current > .el-tree-node__content {
		border: 1px solid #e2e2e2 !important;
		background-color: #f3f3f3;
		border-radius: 2px;
		box-shadow: 2px 3px 5px rgba(170, 170, 170, 0.3);
	}
}
</style>